import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      job: '',
      todolist: ['起床', '洗漱', '上学'] // 使用数组来存储结构类似数据
    };
  }

  inputChange = (e) => {
    console.log(e.target.value);
    // 把input里的表单数据更新到state当中。
    this.setState({
      job: e.target.value
    });
  };

  addJob = () => {
    if (this.state.job.trim() === '') {
      console.log('不能添加空的事项');
      return false;
    }

    // 取到表单值，从state里获取
    console.log(this.state.job);
    console.log(this.state.todolist);

    // 把新的表单值加入todolist
    this.setState({
      job: '',
      todolist: [...this.state.todolist, this.state.job]
    });
  };

  delJob = (i) => {
    // 确定是哪一个删除按钮
    console.log(i);

    // 删除数组里，指定的下标值
    const { todolist } = this.state;

    // splice方法能够改变数组本身，不需要再赋值。
    todolist.splice(i, 1); // splice两个参数：从哪个下标开始，删除多少个值。

    this.setState({
      todolist: todolist
    });
  };

  render() {
    return (
      <div>
        <h1>待办事项</h1>
        事项：
        <input value={this.state.job} onChange={this.inputChange} />{' '}
        <button onClick={this.addJob}>添加</button>
        {this.state.todolist.map((job, i) => {
          return (
            <p key={i}>
              {job} <button onClick={() => this.delJob(i)}>删除</button>
            </p>
          );
        })}
        {/* 条件渲染：加一个提示，只有在列表为空的时候，才显示。 */}
        {this.state.todolist.length === 0 ? <p>请添加事项!</p> : ''}
      </div>
    );
  }
}
